<template>
    <div>
        <swiper :auto="true"
                class="home-banner-swiper"
                :show-dots="true"
                height="190px"
                :loop="true"
                dots-position="center">
            <swiper-item v-for="(item, index) in lists"
                         :key="index">
                <img @click="jumpTo(item)" :src="item.context" :alt="item.name">
            </swiper-item>
        </swiper>
    </div>
</template>

<script>
    /**
     * Created by c.y on 2018/4/28.
     * 首页banner
     */
    import { Swiper, SwiperItem } from 'vux' ;
    export default {
        name: 'home-banner-swiper',
        props:{
            lists:{
        		type:Array
            }
        },
        components: {
            Swiper,
            SwiperItem
        },
        methods:{
            jumpTo(item){
                this.$emit('indexJump', item);
            }
        }
    }
</script>

<style lang="less">
    @import '../style/mixin.less';
    .home-banner-swiper {
        width: 100%;
        height: 190px;
        background-color: @color-background-default;
        .vux-swiper-item {
            img {
                width: 100%;
                height: 100%;
            }
        }
        .vux-indicator{
            a{
                .active{
                    background-color: #fff !important;
                }
            }
        }
        .vux-icon-dot {
            width: 5px !important;
            height: 5px !important;
            border-radius: 50% !important;
        }
    }
</style>
